<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}
		input::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
		input::-moz-placeholder{color: #BBBBBB;font-size: 14px;}

		textarea::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
		textarea::-moz-placeholder{color: #BBBBBB;font-size: 14px;}

		.info-box{width: 100%;}
		.info-box .info-one{align-items: center;height: 50px;padding: 0 15px;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;}
		.info-box .info-one input{text-align: right;padding: 10px 0;line-height: 30px;box-sizing: border-box;}
		.info-box .info-one.goto{background: url(../../image/main3/main3_goto.png) no-repeat right 10px center #FFFFFF;background-size:14px;padding-right: 30px;}
		.info-box .liuyan-box{padding:15px;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;}
		.info-box .liuyan-box textarea{width: 100%;height: 190px;font-size: 14px;line-height: 18px;}
		.info-box .liuyan-box .num{text-align: right;font-size: 12px;color: #666666;}

		.info-box .info-one .price{justify-content: flex-end;}
		.info-box .info-one .price .num-info{flex-shrink: 0;color: #999999;text-align: center;line-height: 24px;color: #999999;}
		.info-box .info-one .price .num-info .sub{width: 30px;height: 30px;background:url(../../image/main2/sub.png) no-repeat center;background-size:12px;}
		.info-box .info-one .price .num-info .num{width: 42px;height: 30px;color: #333333;line-height: 30px;}
		.info-box .info-one .price .num-info .add{width: 30px;height: 30px;background:url(../../image/main2/add.png) no-repeat center;background-size:12px;}
		.info-box .info-one.num-box{padding: 5px 15px;height: 60px;}

		.info-box .up-img{width: 100%;padding: 0 15px 10px 15px;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;}
		.info-box .up-img .title{line-height: 50px;font-size: 14px;}
		.info-box .up-img .img-box{width: 100%;flex-wrap: wrap;}
		.info-box .up-img .img-box .img-one{width: 80px;height: 80px;background-color:#F5F6F6;margin-right: 10px;position: relative;top: 0;left: 0;}
		.info-box .up-img .img-box .img-one:nth-child(4n){margin-right: 0;}
		.info-box .up-img .img-box .img-one .del{width: 20px;height: 20px;position: absolute;top: 4px;right: 4px;background: url(../../image/main3/del-img.png) no-repeat center;background-size:cover ;}
		.info-box .up-img .img-box .add-img{background: url(../../image/main3/add_img.png) no-repeat center ;background-size:100%;width: 80px;height: 80px;}

		.shouhuo-btn{height: 45px;background:#FF9502;height: 45px;border-radius:4px;text-align: center;line-height: 45px;font-size: 18px;color: #FFFFFF;margin: 60px 30px 30px 30px;}

		.pop-info{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background:rgba(0,0,0,0.6);align-items: center;justify-content: center;z-index: 999;}
		.pop-info .pop-box{background: #FFFFFF;width: 75%;height: auto;border-radius:8px;}
		.pop-info .pop-box .pop-title{height: 55px;text-align: center;line-height: 55px;font-size: 16px;color: #333333;font-weight: 700;}
		.pop-info .pop-box .pop-content{padding: 0 15px;box-sizing: border-box;overflow-y: auto;height: 220px;color: #666666;font-size: 14px;}
		.pop-info .pop-box .pop-btn{width: 100%;height: 52px;text-align: center;line-height: 52px;font-size: 16px;color: #FF9502;}

	</style>
	<body>
		<div id="vue" class="warp">

			<div class="info-box">
	        	<div class="info-one flex goto" tapmode onclick="tabWay(this)">
	        		<div class="text">选择售后原因</div>
	        		<input class="flex1" type="text" disabled="false" id="tuiYuan" placeholder="请选择"/>
	        	</div>
	        	<div class="liuyan-box">
	        		<textarea maxlength="300" id="miaoshu" oninput="inputMiaoShu(this)" placeholder="问题描述"></textarea>
	        		<div class="num" id="numLength">0/300</div>
	        	</div>
	 			<!-- <div class="info-one flex num-box">
	        		<div class="text">商品数量</div>
	        		<div class="price flex flex1">
	        			<div class="num-info border-all flex">
							<div class="sub border-right" data-type="1"></div>
							<div class="num" id="tuinum" v-text="Pdata.goods.buynum"></div>
							<div class="add border-left" data-type="2"></div>
						</div>
	        		</div>
	        	</div> -->
	        	<div class="up-img">
	        		<div class="title">上传图片<i style="color:#999;">(最多4张)</i></div>
	        		<div class="img-box flex">
	        			<div class="add-img" id="addImg" tapmode onclick="fnUploadPic(this)"></div>
	        		</div>
	        	</div>
	        	<div class="info-one flex">
	        		<div class="text">联系方式</div>
	        		<input class="flex1" type="tel" maxlength="11" id="phone" placeholder="留下联系方式，方便我们与您联系"/>
	        	</div>
	        </div>

			<div style="width:100%;height:80px;"></div>
			<div class="warp-btn" id="app-footer" tapmode onclick="upTuiData()">
	            <div class="btn">提交</div>
	        </div>

			<!--声明弹窗-->
			<div class="pop-info flex" id="pop-info">
				<div class="pop-box">
					<div class="pop-title">声明</div>
					<div class="pop-content" id="smbox" v-html="Pdata.shenming.content"></div>
					<div class="pop-btn sbx" tapmode onclick="closeSm()">我知道了</div>
				</div>
			</div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">

	define(function (require, exports, module) {
		lanYun.setFooter('app-footer');
		var sdata = {};
		var maxnum = 0;
		var oosinfo = lanYun.getStorage('imageData') || null;
		var ajax = 0;
		var typeData = [];
		var udata = lanYun.getUdata();

		pageParam = api.pageParam;
		sdata.id = pageParam.id;

		_page.getData = function(loading) {
			lanYun.getVueData({url:'UserOrderTui/index',get:{id:pageParam.id},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret))
				if(ret.errcode == 0){
					sdata.num = ret.data.goods.buynum;
					maxnum = sdata.num;
				}else if (ret.errcode == 1) {
					lanYun.alert({fname:'diaLogBox1',title:'提示', button:['确定'],content:ret.msg},function(ret){
						api.closeWin();
					});
		            return;
				}else {
					lanYun.toast(ret.mag);
				}
			});
		};

		lanYun.newVue('#vue',{
			Pdata:{
				goods:{},
				type:[],
				shenming:{
					content:""
				}
			}
		},function() {
			_page.getData(2);
		});

		if(udata && udata.phone){
			$('#phone').val(udata.phone);
		}
		inttype = function () {
			$.each( lanYun.vue.Pdata.type , function(i, n){
				var item = {};
				item.type = i ;
				item.name = n ;
				typeData.push(item);
			});
		}

		// 关闭弹窗
		closeSm = function (){
			$('#pop-info').hide();
		}
		//加减数量
		setBuyNumClick = function(tis){
			var type = tis.dataset.type;
			if(type == 2){
				sdata.num++;
				if(sdata.num >= maxnum){
					sdata.num = maxnum;
					lanYun.toast('已达到最大退货数');
				}
			}else if(type == 1){
				sdata.num--;
				if(sdata.num <= 0){
					sdata.num = 1
				}
			}
			$("#tuinum").text(sdata.num);
		}

		// 输入长度
		inputMiaoShu = function (tis){
			var length = $(tis).val().length;
			$('#numLength').html(length + '/300');
		}

		// 上传图片
		fnUploadPic = function(tis) {
			//lanYun.getPermission(['camera','photos']);
			var dst = tis.dataset;
			if(ajax == 1){return;}
			ajax = 1;
			api.actionSheet({buttons: ['拍照', '相册选取'],style: {fontNormalColor: '#333',fontPressColor: '#333'}}, function(ret, err) {
				ajax = 0;
				if (ret.buttonIndex == 3)return false;
				var souType = 'album'; //相机
				if (ret.buttonIndex == 1)souType = 'camera';
				api.getPicture({sourceType: souType,mediaValue: 'pic',destinationType: 'url',quality: 80,allowEdit: true,}, function(ret, err) {
					if (ret && ret.data) {
						fnUploadOos(ret.data);
					}
				});
			});
		};
		//上传到对象存储服务器
		function fnUploadOos(path){
			if(!path){
				lanYun.toast('请选择上传文件!');
				return;
			}
			if(!oosinfo){
				lanYun.toast('网路访问超时请重试');
				return;
			}
			upfile(path);
		};
		// 上传图片
		function upfile(path){
			var ext = lanYun.getFileExt(path);
			var file = oosinfo.key+lanYun.randStr(10)+ext;
			var urlFile = oosinfo.url+'/'+file;
			lanYun.showProgress({type:2});
			api.ajax({url: oosinfo.url,method: 'post',data: {values:{key: file,OSSAccessKeyId: oosinfo.OSSAccessKeyId,success_action_status: oosinfo.success_action_status,policy:oosinfo.policy,signature: oosinfo.signature},files: {file:path}}}, function(ret, err) {
				lanYun.hideProgress();
				if(err && err.statusCode == 200){
					$('#addImg').before('<div class="img-one bgpic " data-img="'+ urlFile +'" style="background-image:url('+ path +');"><div class="del" tapmode onclick="delImages(this)"></div></div>');
					if($('.img-one').length >= 4){
						$('#addImg').hide();
					}
					lanYun.toast('上传成功');
				}else{
					lanYun.toast('上传失败!');
				}
			});
		};
		// 删除图片
		delImages = function(tis){
			var dst = tis.dataset;
			$(tis).parent().remove();
			if($('.img-one').length <= 3){
				$('#addImg').show();
			}
		};


		//选择退货原因类型
		tabWay = function(){
			inttype();
			if(typeData.length <= 0){
				lanYun.toast('请后台配置原因');
				return;
			}
			lanYun.actionSelect({
				col:1,
				data:typeData,
				title:'请选择退换货原因',
				successCall:function(result){
					if(result && result.eventType == 'ok' && result.selectedInfo){
						var result_data = result.selectedInfo[0];
						$('#tuiYuan').val(result_data.name);
					}
				}
			});
		};

		// 提交售后信息
		upTuiData = function (){
			sdata.yuanyin = $('#tuiYuan').val();
			sdata.phone = $('#phone').val();
			if(!sdata.yuanyin){
				lanYun.toast("请选择售后原因");
				return;
			}
			if(!sdata.phone){
				lanYun.toast("请填写联系方式");
				return;
			}
			var images = [];
			$('.img-box .img-one').each(function(a,f) {
				images.push($(this).data('img'));
			});
			sdata.images = images;
			sdata.content = $('#miaoshu').val();
			//console.log(JSON.stringify(sdata));
			lanYun.post('UserOrderTui/add',sdata,function (ret) {
				lanYun.toast(ret.msg);
				//console.log(JSON.stringify(ret));
				if(ret.errcode == 0 ){
					lanYun.setStorage('reshpage',1);
					lanYun.event('uporderNum');
					lanYun.openFrame('main3/msg_pinjia.html',{type:"shouhou",id:ret.tui_id,ani:1,orderid:ret.orderid,	time:ret.addtime},function(){});
				}else {
					lanYun.toast(ret.msg);
				}
			},2)
		}

	});
</script>
